<template>
	<view class="box" :style="theme">
		<view class="detailsTop">
			<image :src="imgHost+'/kecheng_bg.jpg'"></image>
			<view class="f36 fwb">{{details.name}}</view>
			<view class="f26 mt24">活动时间：{{details.activityTime}}</view>
			<view class="f26 mt24 flex-cb">
				<text>主办方：{{details.sponsor}}</text>
			</view>
			<view class="f26 mt24 flex-cb">
				<text>承办方：{{details.organizer}}</text>
			</view>
		</view>
		<view class="detailsBottom">
			<view class="fwb">联系信息</view>
			<view class="mt3 flex-left" @click="editUser">
				<view class="c2 f28 flex-1">{{username}}</view>
				<view class="c2 f28 flex-2">{{userTel}}</view>
				<view class="c2 f28 flex-1" style="text-align: right;">修改</view>
			</view>
		</view>
		<view class="detailsBottom mt24">
			<view class="fwb">报名人员</view>
			<view class="mt3">
				<checkbox-group @change="checkboxChange">
					<label class="flex-c xueyuan" v-for="(item, index) in items" :key="index">
						<view class="dian"></view>
						<view class="label">{{item.name}}{{item.age?' | ' + item.age+'岁':''}}</view>
						<checkbox class="checkbox-backgroun-color checkbox-round" :value="item.value"
							:checked="item.checked" />
					</label>
				</checkbox-group>
				<view class="addBtn" @click="addShow">添加报名人员</view>
			</view>
		</view>
		<view class="box_footer" @click="$noMultipleClicks(submit)">
			<view class="box_footer_btn">提交订单</view>
		</view>
		<u-popup :show="show" mode="center" round="20rpx">
			<view class="pwd_box">
				<view style="padding: 0 20rpx 0 30rpx;">
					<u--form labelPosition="left" labelWidth="7em">
						<u-form-item label="联系人姓名：" borderBottom required>
							<u--input v-model="usernames" border="none" placeholder="请输入联系人姓名" maxlength="20">
							</u--input>
						</u-form-item>
						<u-form-item label="联系人电话：" required>
							<u--input v-model="userTels" type="number" border="none" placeholder="请输入联系人电话"
								maxlength="11">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="pwd_box_footer">
					<view class="pwd_box_footer_qx" @click="editUser">取消</view>
					<view class="pwd_box_footer_qd" @click="$noMultipleClicks(memberTJ)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				noClick: true,
				bja: 'XXXXXXXXX',
				details: {},
				isActive: false,
				show: false,
				birthday: '',
				username: '',
				userTel: '',
				usernames: '',
				userTels: '',
				items: [],
				students: [],
				showht: false,
				showbx: false,
				ht: '',
				bx: ''
			}
		},
		onLoad(ops) {
			this.id = ops.id;
			this.username = this.userInfo.nickName;
			this.usernames = this.userInfo.nickName;
			this.userTel = this.userInfo.phone;
			this.userTels = this.userInfo.phone;
			this.getDetail()
		},
		onShow() {
			this.studentList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			isTyBtn() {
				this.isActive = !this.isActive
			},
			submit() {
				if (this.students.length == 0 || !this.students) return uni.showToast({
					title: '请选择参加活动人员',
					icon: 'none',
					duration: 2000
				})
				let that = this
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param: {
							memberId: this.userInfo.id,
							activityId: this.id,
							memberName: this.username,
							memberPhone: this.userTel,
							personIds: this.students.join(','),
						}
					},
					api: this.$api.activityOrderSaveMini()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let orderId = res.record.orderId
						uni.showToast({
							title: '报名成功',
							icon: 'success',
							duration: 2000,
							success(res) {
								that.jump2('/pages/order/pay?type=6&orderId=', orderId)
							}
						})
					}
				}).catch(() => {})
			},
			call(e) {
				uni.makePhoneCall({
					phoneNumber: e,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			checkboxChange(e) {
				this.students = e.detail.value
			},
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_COURSE_ENROLL'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.ht = res.recordList[0].value
						this.showht = true
					}
				}).catch(() => {})
			},
			getYxb() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_COURSE_SAFE'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.showbx = true
						this.bx = res.recordList[0].value
					}
				}).catch(() => {})
			},
			onhtClose() {
				this.showht = !this.showht
			},
			onbxClose() {
				this.showbx = !this.showbx
			},
			addShow() {
				this.jump('/pages/member/addStudent')
			},
			memberTJ() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!this.usernames) return uni.showToast({
					title: '请输入联系人姓名',
					icon: 'none',
					duration: 2000
				})
				if (this.usernames.length > 10) return uni.showToast({
					title: '请输入正确联系人姓名',
					icon: 'none',
					duration: 2000
				})
				if (!this.userTels) return uni.showToast({
					title: '请输入联系人电话',
					icon: 'none',
					duration: 2000
				})
				if (!reg_tel.test(this.userTels)) return uni.showToast({
					title: '请正确填写您的手机号码',
					icon: 'none',
					duration: 2000
				})
				this.show = false
				this.username = this.usernames
				this.userTel = this.userTels
			},
			editUser() {
				this.show = !this.show
			},
			studentList() {
				this.$app.ajax({
					api: this.$api.studentList(),
					data: {
						userId: this.userInfo.id,
						param: {}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList
						arr.forEach(e => {
							e.value = e.id
						})
						this.items = arr
					}
				}).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.activityInfoMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							activityId: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.details = res.record
					} else {
						setTimeout(()=> {
							uni.navigateBack({
								delta:1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>


<style scoped lang="scss">
	.box {
		padding-bottom: 160rpx;
	}

	.detailsTop {
		padding: 30rpx;
		position: relative;
		color: #fff;

		image {
			position: absolute;
			top: 0;
			z-index: -1;
			height: 100%;
			left: 0;
			width: 100%;
		}
	}

	.detailsBottom {
		padding: 40rpx 30rpx;
		background-color: #fff;
		position: relative;

		.fwb {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bolder;
			color: #222222;
		}

		.zks {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			text {
				&:first-of-type {
					font-weight: bolder;
				}
			}
		}

		.kcj {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-top: 20rpx;

			text {
				&:first-of-type {
					font-weight: bolder;
				}
			}
		}
	}

	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.apply {
		align-items: flex-start;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.activeDetails {
		width: 78%;
	}

	.addBtn {
		height: 68rpx;
		width: 200rpx;
		margin: 0 auto;
		text-align: center;
		color: $color;
		background-color: #fff;
		border: 1px solid $color;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
	}

	.label {
		display: flex;
		line-height: 1.5;
		font-size: 28rpx;
		margin-top: 10rpx;
		font-weight: 400;
		color: #222222;
	}

	.xueyuan {
		margin-bottom: 20rpx;
		margin-top: 20rpx;

		.dian {
			margin-right: 10rpx;
			width: 10rpx;
			height: 10rpx;
			background: #999999;
			border-radius: 50%;
		}

		.label {
			margin-top: 0;
			flex: 1;
		}
	}

	.label-left {
		color: #666666;
		display: inline-block;
		width: 5em;
	}

	.label-right {
		flex: 1;
	}
	.bmry {
		display: flex;
		flex-wrap: wrap;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.kuan {
		background-color: #fff;
		height: 120rpx;
	}

	.box_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		background: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.box_footer_btn {
			height: 100rpx;
			background: $color;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}


	}
</style>
